<template>
  <div class="login-container">
      <div class="login-logo">
        <account />
      </div>
  </div>
</template>

<script lang="ts" setup>
import {defineComponent, defineAsyncComponent, ref} from 'vue'
const account = defineAsyncComponent(() => import('./component/accoent.vue'))
</script>

<style scoped lang="scss">
.login-container {
  height: 100%;
  width: 100%;
  background: url("../../assets/banner_login.jpg") no-repeat;

  .login-logo {
    width: 400px;
    padding: 20px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) translate3d(0, 0, 0);
    // border: 5px solid var(--color-primary-light-8);
    // border-radius: 4px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: height 0.2s linear;
    height: 480px;
    overflow: hidden;
    z-index: 999;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.1);
    animation: borderScroll 3s infinite linear;
  }

  @keyframes borderScroll {
    0% {
      border-color: #3498db; /* 颜色1 */
    }
    25% {
      border-color: #e74c3c; /* 颜色2 */
    }
    50% {
      border-color: #2ecc71; /* 颜色3 */
    }
    75% {
      border-color: #f1c40f; /* 颜色4 */
    }
    100% {
      border-color: #3498db; /* 回到颜色1，形成循环 */
    }
  }
}
</style>
